import defaultSettings from "@/settings";

import zhTw from "element-plus/es/locale/lang/zh-tw";
import en from "element-plus/es/locale/lang/en";
import { store } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { SidebarStatusEnum } from "@/enums/SidebarStatusEnum";

export const useAppStore = defineStore("app", () => {
  const device = useStorage("device", DeviceEnum.DESKTOP);

  const size = useStorage("size", defaultSettings.size);

  const browserLanguage = navigator.language;
  if (browserLanguage.includes("en")) {
    defaultSettings.language = "en";
  } else {
    defaultSettings.language = "zh-tw";
  }

  const language = ref(defaultSettings.language); // useStorage("language", defaultSettings.language);

  const sidebarStatus = useStorage("sidebarStatus", SidebarStatusEnum.CLOSED);
  const sidebar = reactive({
    opened: sidebarStatus.value === SidebarStatusEnum.OPENED,
    withoutAnimation: false,
  });

  const activeTopMenuPath = useStorage("activeTopMenuPath", "");

  const locale = computed(() => {
    if (language.value == "en") {
      return en;
    } else {
      return zhTw;
    }
  });

  function toggleSidebar() {
    sidebar.opened = !sidebar.opened;
    sidebarStatus.value = sidebar.opened ? SidebarStatusEnum.OPENED : SidebarStatusEnum.CLOSED;
  }

  function closeSideBar() {
    sidebar.opened = false;
    sidebarStatus.value = SidebarStatusEnum.CLOSED;
  }

  function openSideBar() {
    sidebar.opened = true;
    sidebarStatus.value = SidebarStatusEnum.OPENED;
  }

  function toggleDevice(val: string) {
    device.value = val;
  }

  function changeSize(val: string) {
    size.value = val;
  }

  function changeLanguage(val: string) {
    language.value = val;
  }

  function activeTopMenu(val: string) {
    activeTopMenuPath.value = val;
  }
  return {
    device,
    sidebar,
    language,
    locale,
    size,
    activeTopMenu,
    toggleDevice,
    changeSize,
    changeLanguage,
    toggleSidebar,
    closeSideBar,
    openSideBar,
    activeTopMenuPath,
  };
});

export function useAppStoreHook() {
  return useAppStore(store);
}
